<template>
  <el-dialog
    :fullscreen="true"
    v-model="data.visable"
    :show-close="false"
    class="dialogMain"
  >
    <div class="dialog-head">
      <formHead
        @cancel="cancel"
        :processFormName="(data.currentFormInfo as any).processForm.processFormName"
      ></formHead>
    </div>
    <div class="Big-Content">
      <formDesign
        :formInfo="data.currentData"
        :currentFormInfo="data.currentFormInfo"
      ></formDesign>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { useGlobalStore } from '@/store/modules/globalStore';
import formHead from './components/head.vue';
import formDesign from './components/formDesign.vue';
import Api from '@/api/flow/processForm/index';
import { ElMessage } from 'element-plus';
import mitt from '@/utils/bus';
const bus: any = mitt;
const globalStore = useGlobalStore();
const data = reactive({
  visable: false,
  currentData: {},
  currentFormInfo: {},
});
const cancel = () => {
  data.visable = false;
};
const open = async (currentData: any) => {
  await getFormInfoByFormId(currentData.Id);
  data.currentData = currentData;
  globalStore.SetIsHideLayout(true);
  data.visable = globalStore.isHideLayout;
};
const getFormInfoByFormId = async (id: any) => {
  var res = await Api.getFormInfoByFormId.get(id);
  if (res.code != 0) {
    ElMessage.warning('获取信息失败!请联系管理员:rookie');
  }
  data.currentFormInfo = res.data;
};
defineExpose({ open });
</script>
<style lang="scss">
// :deep(.el-dialog__body),
.dialogMain {
  .el-dialog__header {
    padding: 0;
  }
  // .el-dialog {
  //   overflow: hidden;
  //   margin: 20 auto;
  // }
  .el-dialog__body {
    // overflow: hidden;
    padding: 0;
  }
  .dialog-head {
    display: flex;
    height: 60px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    padding: 0 20px;
    justify-content: space-between;
  }
  .Big-Content {
    display: flex;
    height: calc(100vh - 60px);
    width: 100%;
  }
}
</style>
